<script setup lang="ts">
import u520 from '@/assets/u520.svg'
import u519 from '@/assets/u519.svg'
import u521 from '@/assets/u521.png'
import u522 from '@/assets/下载.png'
import u523 from '@/assets/下载 (1).png'
import u646 from '@/assets/u646_state0.jpg'
import icon1 from '@/assets/图片.png'
import icon2 from '@/assets/file-ppt-2-line.png'
import icon3 from '@/assets/翻译.png'
import icon4 from '@/assets/方案创意策划.png'

import vueDanmaku from 'vue3-danmaku'

import { onMounted, ref, type Ref } from 'vue'

import { useRouter } from 'vue-router';
import { dialogStore } from '@/stores/dialog'
import { useStore } from '@/stores/user'
import { getChatCompletion } from '@/utils/kimi'
import u1658 from '@/assets/u1658.png'
import { danmuFn } from '@/api/danmuApi'
import { userrequsertFn } from '@/api/UserApi'


const userInput = ref('')
const router = useRouter()
const store = useStore()
const logstore = dialogStore()

const userinfoname = ref('')

// 获取用户信息
userrequsertFn({
  action:'get_user',
  token: localStorage.getItem('token') || '',
  user_id: localStorage.getItem('userid') || ''
}).then(res => {

  userinfoname.value = res.data.data.full_name
  console.log(res.data.data.full_name);
  
})




const response = ref('');  // ai回复 

async function inputClick() {

  router.push('/dialog')
  
  logstore.changeloglist({
    id: 'user',
    text: userInput.value,
    photo: store.photo
  })

  response.value = await getChatCompletion(userInput.value);

  userInput.value = ''

  logstore.changeloglist({
    id: 'response',
    text: response.value,
    photo: u1658
  })

 

}

// 弹幕
const danmus: Ref<Array<string>> = ref([])

danmuFn().then(res => {
  danmus.value = res.data.data
})

</script>

<template>

  <div class="stylebox">

    <!-- 头部搜索 -->
    <header>
      <div class="text">
        <h1 class="title">Hi,{{ userinfoname }}</h1>
        <p>有什么问题都可以问我哦~</p>
      </div>
      <van-image class="bgposition1" :src="u519">

        <van-image class="bgposition2" :src="u520"></van-image>

        <van-cell-group inset>
          <van-field v-model="userInput" center placeholder="输入你想知道的事">
            <template #button>
              <van-button size="small" class="searchbtn" round @click="inputClick">搜索</van-button>
            </template>
          </van-field>
        </van-cell-group>

        <van-image class="bgposition3" :src="u521"></van-image>
      </van-image>


    </header>

    <!-- 卡片 -->
    <main>

      <div class="cardbox" @click="$router.push('/fanyi')">
        <van-image fit="cover" class="headerimg" :src="u522"></van-image>
        <section>
          <h3>万能翻译</h3>
          <p class="van-multi-ellipsis--l2">万能魔法，生存你脑海里的图片</p>
        </section>
        <van-image class="iconimg" fit="cover" :src="icon3"></van-image>
      </div>

      <div class="cardbox">
        <van-image fit="cover" class="headerimg" :src="u522"></van-image>
        <section>
          <h3>图片生成</h3>
          <p class="van-multi-ellipsis--l2">万能魔法，生存你脑海里的图片</p>
        </section>
        <van-image class="iconimg" fit="cover" :src="icon1"></van-image>
      </div>

      <div class="cardbox">
        <van-image fit="cover" class="headerimg" :src="u523"></van-image>
        <section>
          <h3>PPT大纲生成</h3>
          <p class="van-multi-ellipsis--l2">万能魔法，生存你脑海里的图片</p>
        </section>
        <van-image class="iconimg" fit="cover" :src="icon2"></van-image>
      </div>



      <div class="cardbox">
        <van-image fit="cover" class="headerimg" :src="u522"></van-image>
        <section>
          <h3>灵感创意</h3>
          <p class="van-multi-ellipsis--l2">万能魔法，生存你脑海里的图片</p>
        </section>
        <van-image class="iconimg" fit="cover" :src="icon4"></van-image>
      </div>

    </main>
    <!-- 弹幕 -->
    <div class="barragebox">
      <h1 class="title">魔法咒语</h1>
      <vue-danmaku v-model:danmus="danmus" loop style="height:150px; width:100%;" :speeds="100" useSlot :top="10">
        <template v-slot:dm="{ index, danmu }">
          <span class="danmutext" >{{ danmu }}</span>
        </template>
      </vue-danmaku>
    </div>

    <!-- 创意灵感 -->
    <div class="creative">
      <h1 class="title">创意灵感</h1>
      <div class="footercardbox">
        <div class="card">
          <div class="photobox">
            <van-image width="100%" height="100%" fit="cover" round class="photo" :src="u646"></van-image>
          </div>

          <div class="text">
            <h1>文案创作小助手</h1>
            <p>可以轻松撰写文案规范化文案方案</p>
          </div>
          <div class="smallimg">
            <van-image class="img1" width="0.3rem" height="0.3rem" fit="cover" round :src="u646">

            </van-image>
            <van-image class="img2" width="0.2rem" height="0.3rem" fit="cover" round :src="u646">

            </van-image>
            <van-image class="img3" width="0.3rem" height="0.3rem" fit="cover" round :src="u646" />
          </div>
        </div>

        <div class="card">
          <div class="photobox">
            <van-image width="100%" height="100%" fit="cover" round class="photo" :src="u646"></van-image>
          </div>

          <div class="text">
            <h1>文案创作小助手</h1>
            <p>可以轻松撰写文案规范化文案方案</p>
          </div>
          <div class="smallimg">
            <van-image class="img1" width="0.3rem" height="0.3rem" fit="cover" round :src="u646">

            </van-image>
            <van-image class="img2" width="0.2rem" height="0.3rem" fit="cover" round :src="u646">

            </van-image>
            <van-image class="img3" width="0.3rem" height="0.3rem" fit="cover" round :src="u646" />
          </div>
        </div>


        <div class="card">
          <div class="photobox">
            <van-image width="100%" height="100%" fit="cover" round class="photo" :src="u646"></van-image>
          </div>

          <div class="text">
            <h1>文案创作小助手</h1>
            <p>可以轻松撰写文案规范化文案方案</p>
          </div>
          <div class="smallimg">
            <van-image class="img1" width="0.3rem" height="0.3rem" fit="cover" round :src="u646">

            </van-image>
            <van-image class="img2" width="0.2rem" height="0.3rem" fit="cover" round :src="u646">

            </van-image>
            <van-image class="img3" width="0.3rem" height="0.3rem" fit="cover" round :src="u646" />
          </div>
        </div>


        <div class="card">
          <div class="photobox">
            <van-image width="100%" height="100%" fit="cover" round class="photo" :src="u646"></van-image>
          </div>

          <div class="text">
            <h1>文案创作小助手</h1>
            <p>可以轻松撰写文案规范化文案方案</p>
          </div>
          <div class="smallimg">
            <van-image class="img1" width="0.3rem" height="0.3rem" fit="cover" round :src="u646">

            </van-image>
            <van-image class="img2" width="0.2rem" height="0.3rem" fit="cover" round :src="u646">

            </van-image>
            <van-image class="img3" width="0.3rem" height="0.3rem" fit="cover" round :src="u646" />
          </div>
        </div>


        <div class="card">
          <div class="photobox">
            <van-image width="100%" height="100%" fit="cover" round class="photo" :src="u646"></van-image>
          </div>

          <div class="text">
            <h1>文案创作小助手</h1>
            <p>可以轻松撰写文案规范化文案方案</p>
          </div>
          <div class="smallimg">
            <van-image class="img1" width="0.3rem" height="0.3rem" fit="cover" round :src="u646">

            </van-image>
            <van-image class="img2" width="0.2rem" height="0.3rem" fit="cover" round :src="u646">

            </van-image>
            <van-image class="img3" width="0.3rem" height="0.3rem" fit="cover" round :src="u646" />
          </div>
        </div>
      </div>
    </div>

  </div>

</template>
<style lang="scss" scoped>
.stylebox {

  width: 100%;
  background-color: #f1f5fb;


  header {
    width: 100%;
    height: 30%;
    color: #1b1b1b;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;

    // background: url('../../assets/u519.svg') no-repeat;
    // background-size: cover;
    .text {
      width: 80%;
      position: absolute;
      top: 35%;
      z-index: 999;

      .title {
        color: #1b1b1b;
        margin: 0;
      }

      p {
        color: #5f5f5f;
      }
    }



    .bgposition1 {
      width: 100%;
      // position: absolute;
      // top: 0;
      z-index: 0;
      opacity: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .bgposition2 {
      width: 100%;
      position: absolute;
      bottom: 0;
      z-index: 10;
      opacity: 0.35;

    }

    .bgposition3 {
      width: 45%;
      position: absolute;
      bottom: -5%;
      right: 0%;
      z-index: 100;
      opacity: 1;

    }

    .van-cell-group {
      width: 85%;
      position: absolute;
      bottom: -10%;
      z-index: 999;
      border-radius: 22px;
    }

    .van-field {
      width: 100%;
      border: 1px solid #1b1b1b;
      border-radius: 22px;
      height: 44px;
      padding: 0;
      padding-left: 16px;

      .searchbtn {
        color: #fff;
        width: 80px;
        height: 40px;
        background-color: #1b1b1b;
      }
    }
  }

  main {
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
  }

  main .cardbox:nth-child(1) {
    margin-left: 10px;
  }

  .cardbox {
    display: inline-block;
    width: 150px;
    height: 1.675rem;
    border-radius: 10px;
    background-color: #fff;
    margin-right: 10px;
    overflow: auto;
    position: relative;

    .headerimg {
      width: 100%;
      height: 50%;
      // background-color: #1b1b1b;

    }

    section {
      padding: 15px;

      h3 {
        font-size: 0.18rem;
        font-weight: 800;
      }

      p {
        color: #5f5f5f;
        margin-top: 5px;
      }
    }


    .iconimg {
      position: absolute;
      top: calc(50% - 15px);
      left: 10%;
      width: 30px;
      border: 1px solid #fff;
      border-radius: 5px;
      background-color: #695eff;
      padding: 2px;
    }
  }


  .barragebox {
    width: 100%;
    padding: 0 5%;
    display: flex;
    flex-direction: column;
    // align-items: center;

    .title {
      width: 80%;
    }

    .barragetext {
      width: 100%;


    }
  }

  .creative {
    width: 100%;
    padding: 5% 5%;
    background-color: #f1f5fb;

    .title {
      width: 80%;
    }

    .card {
      width: 100%;
      height: 90px;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      padding: 10px;
      border-radius: 15px;
      margin-bottom: 20px;

      .photobox {
        width: 20%;
        margin-right: 10px;
      }

      .text {
        flex: 1;

        h1 {
          font-size: 0.18rem;
        }

        p {
          font-size: 0.12rem;
          color: #5f5f5f;
        }
      }

      .smallimg {
        margin-left: 10px;
        width: 30%;
        height: 40%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;

        .img1 {

          z-index: 1;
          position: absolute;
          top: 0;
          left: 0px;

        }

        .img2 {
          position: absolute;
          top: 0;
          left: 25px;
          z-index: 10;

        }

        .img3 {
          position: absolute;
          top: 0;
          left: 40px;
          z-index: 20;
        }
      }
    }


  }

  .creative div .card:nth-last-child(1) {
    color: red !important;
    margin-bottom: 0px !important;
  }


  // 弹幕
  .danmutext {
    background-color: black;
     color:#fff; 
     padding:5px;
     border-radius: 15px; 
     font-size: 10px;
     opacity: 0.85;
  }
}
</style>